<template>
  <el-dialog
    :model-value="appointmentDialog"
    v-if="appointmentDialog"
    title="预约随访"
    width="80%"
    class="appointment-dialog"
    top="5vh"
    @close="$emit('update:appointmentDialog', false)"
  >
    <div class="dialog-content">
      <div class="calendar-header">
        <el-radio-group v-model="appointmentType">
          <el-radio-button label="单次预约" />
          <el-radio-button label="周期预约" />
          <el-radio-button label="随访计划" />
        </el-radio-group>
      </div>
    </div>
    <singleAppointment ref="singleAppointmentRef" v-if="appointmentType === '单次预约'" :appointmentData="appointmentData" />
    <followPlan v-if="appointmentType === '随访计划'" :appointmentData="appointmentData" />
    <PeriodicAppointment v-if="appointmentType === '周期预约'" :appointmentData="appointmentData" @cutChange="cutChange" />
  </el-dialog>
</template>

<script setup>
import { ref, reactive,nextTick } from 'vue';
import followPlan from './followPlan.vue';
import singleAppointment from './singleAppointment.vue';
import PeriodicAppointment from './periodicReservation.vue';

const appointmentType = ref('单次预约');
defineProps({
  appointmentDialog: {
    type: Boolean,
    default: false,
  },
});
let  appointmentData = ref({});
let singleAppointmentRef = ref(null);
const open = (row) => {
  appointmentData.value = row;
  nextTick(() => {
    singleAppointmentRef.value.opens(row);
  })
}
defineExpose({
  open,
});
const cutChange = (appointmentName) => {
  appointmentType.value = appointmentName;
};
</script>

<style scoped lang="scss">
.appointment-dialog {
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>
